<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import PersonalNav from "@/components/PersonalNav.vue";
import showMessage from "@/utils/messages";
import axios from "axios";
export default {
  name: "ChangePassword",
  data:function (){
    return{
      current_password:'',
      new_password: '',
      re_new_password: '',
    }
  },
  methods:{
    setPassword(){
      const current_password = this.current_password
      const new_password = this.new_password
      const re_new_password = this.re_new_password
      if (current_password === ''){
        showMessage('原密码不能为空')
        return
      }
      if (new_password === ''){
        showMessage('新密码不能为空')
        return
      }
      if (re_new_password === ''){
        showMessage('确认密码不能为空')
        return
      }
      const formData = {
        current_password: current_password,
        new_password: new_password,
        re_new_password: re_new_password,
      }
      const token = localStorage.getItem('token')
      axios
          .post('/api/users/set_password/',formData)
          .then(response =>{
            showMessage('修改成功','info',()=>{
              this.$router.push({
                name:'Login'
              })
            })
          })
          .catch(error=>{
            const errorData = error.response.data;
            const errorMessage = Object.values(errorData).flat();
            for (let i=0;i<errorMessage.length;i++){
              showMessage(errorMessage[i])
            }
          })

    }
  },
  components: {PersonalNav, Footer, Header}
}
</script>

<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <Header></Header>
    <div id="main" class="bg-primary-300 p-6 text-black">
      <div class="rounded bg-white mx-4 my-4 py-6">
        <div class="px-6">
          <h1 class="text-lg font-semibold">个人中心</h1>
        </div>
      </div>
      <div class="rounded bg-white mx-4 mt-4 py-6">
        <PersonalNav></PersonalNav>
        <div class="mt-4 mb-3">
          <div class="not-prose relative">
            <div class="ml-4 text-lg">
              <div class="py-2 text-md">
                <form action="" method="post" class="w-[300px]">
                  <div class="flex items-center justify-between py-2">
                    <label for="old_password">原始密码:</label>
                    <input v-model="current_password" id="old_password" type="password" name="old_password"
                           class="mx-2 outline-0 rounded border border-solid border-gray-500" value=""/>
                  </div>
                  <div class="flex items-center justify-between py-2">
                    <label for="new_password">新密码:</label>
                    <input v-model="new_password" id="new_password" type="password" name="new_password"
                           class="mx-2 outline-0 rounded border border-solid border-gray-500" value=""/>
                  </div>
                  <div class="flex items-center justify-between py-2">
                    <label for="confirm">确认密码:</label>
                    <input v-model="re_new_password"  id="confirm_password" type="password" name="confirm_password"
                           class="mx-2 outline-0 rounded border border-solid border-gray-500" value=""/>
                  </div>
                  <button type="button" id="change_password" v-on:click.prevent="setPassword"
                          class="mb-2 rounded border bg-blue-500 text-white text-sm h-8 w-16">提交
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped lang="scss">

</style>